<template>
  <div class="trends-page">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      class="pullrefresh"
    >
      <div class="trend-box" v-for="(item, index) in trendlist" :key="index">
        <div class="avatar-box">
          <div class="avatar-part">
            <img v-lazy="item.avatarurl" />
          </div>
          <div class="info-part">
            <div class="line1">
              <div
                class="avatarname"
                @click="gotolinkwithdata('UserPage', item)"
              >
                {{ item.nickname }}
              </div>
              <icon-svg
                icon-class="more"
                icon-color="#304056"
                class="moreicon"
                @click="morefunc(item)"
              ></icon-svg>
            </div>
            <div class="info-button">
              <div class="avatardate">{{ item.time }}</div>
              <div class="location">
                <icon-svg
                  icon-class="position"
                  icon-color="#304056"
                  class="dingwei-icon"
                ></icon-svg>
                北京市
              </div>
            </div>
          </div>
        </div>

        <div class="trend-content">
          <div class="content" @click="totrenddetail(item)">
            {{ item.content }}
          </div>
          <div v-if="item.images.length > 0" class="trendimg">
            <img
              v-for="(i, index1) in item.images"
              :key="index1"
              v-lazy="i"
              alt=""
              @click="showpic(item.images, index1)"
              class="trendimages"
            />
          </div>
          <div class="tagbox">
            <div v-for="(i, index2) in item.tag" :key="index2" class="tag">
              <icon-svg
                icon-class="topic_red"
                icon-color="#304056"
                class="tagicon"
              ></icon-svg>
              <div class="tagtitle">{{ i }}</div>
            </div>
          </div>
        </div>
        <div class="share-comment-like">
          <div class="share-comment-likebox">
            <icon-svg
              icon-class="ground_share"
              icon-color="#304056"
              class="share-comment-likeicon"
            ></icon-svg>
            <span>转发</span>
          </div>
          <div class="share-comment-likebox">
            <icon-svg
              icon-class="ground_comment"
              icon-color="#304056"
              class="share-comment-likeicon"
            ></icon-svg>
            <span>评论</span>
          </div>
          <div class="share-comment-likebox">
            <icon-svg
              icon-class="ground_good_gray"
              icon-color="#304056"
              class="share-comment-likeicon"
            ></icon-svg>
            <span>点赞</span>
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <van-action-sheet
      v-model:show="actionshow"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />
    <van-floating-bubble
      axis="xy"
      magnetic="x"
      :icon="addtrendpng"
      :gap="5"
      @offset-change="onOffsetChange"
      class="addtrend"
      @click="toaddtrend"
    />

    <div style="padding-bottom: calc(50px + env(safe-area-inset-bottom))" />
  </div>
</template>

<script>
import { showImagePreview, showToast } from "vant";
import addtrendpng from "../../assets/images/addtrend.png";
export default {
  data() {
    return {
      isLoading: false,
      actionshow: false,
      addtrendpng,
      selected: "",
      actions: [{ name: "关注" }, { name: "拉黑" }, { name: "举报" }],
      trendlist: [
        {
          nickname: "xxx",
          time: "13小时前",
          avatarurl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          tag: ["桌球技术", "助教指导"],
          images: [
            "https://img01.yzcdn.cn/vant/apple-1.jpg",
            "https://img01.yzcdn.cn/vant/apple-1.jpg",
            "https://img01.yzcdn.cn/vant/apple-1.jpg",
            require("../../assets/images/club2.jpg"),
          ],
          content:
            "今天在桌球俱乐部感受到了专业助教的指导，学到了一招两式，感觉技术进步飞快！🎱✨",
        },
        {
          nickname: "xxx",
          time: "13小时前",
          avatarurl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          tag: ["桌球技巧", "技术讲座", "学无止境"],
          images: [
            "https://img01.yzcdn.cn/vant/apple-1.jpg",
            "https://img01.yzcdn.cn/vant/apple-1.jpg",
          ],
          content:
            "刚刚参加了俱乐部的技术讲座，收获颇丰！学到了一些高级技巧和战术，真是受益匪浅。感谢俱乐部提供这样的学习机会，让我在桌球的道路上不断进步。🔝 ",
        },
        {
          nickname: "xxx",
          time: "13小时前",
          avatarurl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          tag: ["比赛日", "桌球对决", "俱乐部竞技"],
          images: ["https://img01.yzcdn.cn/vant/apple-1.jpg"],
          content:
            "和小伙伴们在俱乐部进行了一场激烈的比赛！环境舒适，设施齐全，真是桌球的天堂。下次比赛预约已经开启，一起来挑战吧！💪🏽 ",
        },
        {
          nickname: "xxx",
          time: "13小时前",
          avatarurl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          tag: ["球杆调整", "台面技巧", "助教分享"],
          images: [],
          content:
            "助教分享了一些调整杆材和台面的小窍门，简单易学，效果杠杠的！现在杆材选择更得心应手，台面掌控更自如。分享给大家，一起提高球具操控水平吧！",
        },
        {
          nickname: "xxx",
          time: "13小时前",
          images: [],
          avatarurl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          tag: ["球杆调整", "台面技巧", "助教分享"],
          content:
            "助教分享了一些调整杆材和台面的小窍门，简单易学，效果杠杠的！现在杆材选择更得心应手，台面掌控更自如。分享给大家，一起提高球具操控水平吧！",
        },
      ],
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    totrenddetail(item) {
      this.$router.push({
        name: "TrendsDetail",
        params: {
          trendinfo: JSON.stringify(item),
        },
      });
    },
    showpic(images, index) {
      showImagePreview({
        images: images,
        startPosition: index,
      });
    },

    onOffsetChange() {},
    toaddtrend() {
      this.$router.push("/addtrend");
    },
    gotolinkwithdata(name, data) {
      this.$router.push({
        name: name,
        params: {
          userinfo: JSON.stringify(data),
        },
      });
    },
    morefunc(value) {
      this.selected = "";
      this.actionshow = true;
      this.selected = value;
    },
    onCancel() {},
    onSelect(item) {
      if (item.name == "关注") {
      } else if (item.name == "拉黑") {
      } else if (item.name == "删除") {
      } else if (item.name == "举报") {
      }
    },

  },

};
</script>

<style scoped>
.trends-page {
  margin: 0;
  padding: 0;
}
.pullrefresh {
  display: flex;
  height: 100%;
}

.pullrefresh :deep(.van-pull-refresh__track) {
  height: 100%;
  min-height: 300px;
  background-color: #f2f3f5;
}

.trend-box {
  display: flex;
  flex-direction: column;
  margin: 15px auto 10px auto;
  width: 85%;
  align-items: center;
  padding: 12px;
  background-color: #fff;
  border-radius: 20px;
}

.avatar-box {
  display: flex;
  width: 100%;
  height: 1.5rem;
}
.avatar-part {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}
.avatar-part img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-part {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 16px;
  margin-left: 5px;
  flex-grow: 1;
}
.line1 {
  display: flex;
  justify-content: space-between;
}
.avatarname {
  font-size: 20px;
  font-weight: 550;
}
.moreicon {
  width: 25px;
  height: 25px;
}
.info-button {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: #969799;
  margin-bottom: 5px;
}
.dingwei-icon {
  width: 18px;
  height: 18px;
  margin-right: -5px;
}

.location {
  margin-left: 10px;
}

.trend-content {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 1.5rem;
  font-size: 16px;
}
.trendimg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.trendimg img {
  width: 100%;
  height: auto; /* 将高度设置为自动以确保宽高比不变 */
  object-fit: cover;
  aspect-ratio: 1 / 1; /* 设置宽高比为1:1，即正方形 */
}

.tagbox {
  margin-top: 8px;
  display: flex;
}
.tagbox .tag {
  margin-right: 10px;
  display: flex;
  align-items: center;
  border: 1px solid rgb(169, 169, 169);
  border-radius: 12px;
  box-sizing: border-box;
  padding: 2px;
}
.tag .tagicon {
  width: 18px;
  height: 18px;
  margin-right: 3px;
}
.tag .tagtitle {
  font-size: 13px;
  margin-right: 3px;
}
.share-comment-like {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 1.5rem;
  font-size: 18px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.share-comment-likebox {
  display: flex;
  align-items: center;
}
.share-comment-likebox span {
  font-size: 14px;
  color: #adaeb0;
}
.share-comment-likeicon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.addtrend {
  position: fixed;
  bottom: 80px !important;
  right: 20px !important;
  background-color: rgba(245, 222, 179, 0);
}
</style>
<style>
.van-floating-bubble,
.addtrend {
  position: fixed;
  width: 80px !important;
  height: 80px !important;
  top: -45px !important;
  left: 0 !important;
  background-color: rgba(245, 222, 179, 0) !important;
}
.addtrend .van-icon .van-icon__image {
  width: 100% !important;
  height: 100% !important;
}
</style>